<template>
  <div class="add-img">
    <div class="img-box" v-for="(file,i) of files" :key="i">
      <div class="img-b">
        <span>{{file.name}}</span>
      </div>
      <!-- <i class="close" @click="() => del(i)" ></i> -->
      <CloseBtn @click="() => del(i)" />
    </div>
    <a v-show="!isUploading&&allowAdd" class="abtn" href="javascript:;" @click="$emit('add')">{{bText}}</a>
    <a v-show="isUploading" class="abtn" href="javascript:;" @click="$emit('cancel')"><span>{{progressText}}</span> 终止</a>
  </div>
</template>

<script>
import CloseBtn from './CloseBtn'
export default {
  components: {
    CloseBtn
  },
  props: {
    initFiles: {
      type: Array,
      default: () => { return [] }
    },
    btnText: {
      type: String,
      default: '增加文件'
    },
    hasBtnText: {
      type: String,
      default: '增加文件'
    },
    isUploading: Boolean,
    maxCount: {
      type: Number,
      default: 0
    }
  },
  data () {
    return {
      files: [],
      progressText: ''
    }
  },
  created () {
    this.update()
  },
  computed: {
    bText () {
      return this.count ? this.hasBtnText : this.btnText
    },
    count () {
      return this.files.length
    },
    allowAdd () {
      let { maxCount } = this
      if (maxCount) {
        return this.count < maxCount
      }
      return true
    }
  },
  watch: {
    initFiles () {
      this.update()
    },
    files (files) {
      if (this.isChange) {
        this.$emit('change', files)
        this.isChange = false
      }
    }
  },
  methods: {
    add (url) {
      this.files.push({
        url
      })
      this.isChange = true
    },
    addSingle (url) {
      this.files = [url]
      this.isChange = true
    },
    del (index) {
      this.files.splice(index, 1)
      this.isChange = true
    },
    update () {
      this.files = this.initFiles.slice(0)
    }
  }
}
</script>

<style scoped>
.add-img {
  overflow: hidden;
}
.abtn {
  /* float: left;
  width: 60px;
  height: 80px; */
  /* display: flex; */
  /* align-items: center;
  justify-content: center; */
  display: block;
  margin: 6px 0 0 6px;
  clear: both;
}
.img-box {
  position: relative;
  /* width: 60px; */
  /* height: 80px; */
    padding: 6px;
  /* float: left; */
  margin: 6px 0 0 6px;
  .img-b {
    /* background-color: #666; */
    display: table-cell;
    vertical-align: middle;
    /* height: 80px; */
  }
  img {
    max-width: 100%;
    max-height: 100%;
  }
}
.close-btn {
  width: 16px;
  height: 16px;
  background-color: red;
  position: absolute;
  right: 5px;
  top: 5px;
  pointer-events: auto;
  box-sizing: content-box;
  & >>> .close-ico {
    width: 16px;
    height: 16px;
  }
}
/* .close::before,
.close::after {
  content: '';
  width: 80%;
  height: 2px;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  margin: auto;
  background-color: #fff;
  transform: rotate(45deg)
}
.close::before {
  transform: rotate(-45deg)
} */
</style>
